import React from 'react'
import '../../assets/css/Hot.css'

import {HotCon} from '../../http'
class Hot extends React.Component{
    constructor(){
        super();
        this.state={
            updateTime:new Date(),
            tracks:[],
            playlist:[]
        }
    }
    render(){
        return <div key='hotCom' className='animate__animated' id='hotCom'>
            {/* 头部 */}
            <div className='header'>
                <div className='hd_con'>
                    <div className='hoticon'></div>
                    <p className='update_date'>更新日期:&nbsp;{this.state.updateTime.getMonth()<9?'0'+(this.state.updateTime.getMonth()+1):(this.state.updateTime.getMonth()+1)}月{this.state.updateTime.getDate()<10?'0'+(this.state.updateTime.getDate()):(this.state.updateTime.getDate())}日</p>
                </div>
            </div>
            {/* 歌单列表 */}
            <div className='music_list_box'>
                <div className='ml_header'>
                    <span className='iconfont icon-bofang'></span> 
                    <span className='mlh_title'>播放全部</span>
                    <span className='m_count'>(共{this.state.tracks.length}首)</span>
                    <button className='add_comment'><span className='addIcon'>+</span>收藏({this.state.playlist.commentCount})</button>
                </div>
                <ul className='ml_ul'>
                    {
                        this.state.tracks.map((item, index) => {
                            return (
                                <li key={item.id} className='songListItem'>
                                    <div className='itemCon'>
                                        <span className='m_sort'>{index + 1}</span>
                                        <span className='songInfo'>
                                            <p className='songName'>{item.name}</p>
                                            <p className='artists'>
                                                {
                                                    item.ar.map(artItem => {
                                                        return <span key={artItem.id}>{artItem.name}</span>
                                                    })
                                                }
                                                -&nbsp;
                                                {
                                                    item.al.name
                                                }
                                            </p>
                                        </span>
                                        <div className='m_play'>
                                            <span className='iconfont icon-bofang'></span>
                                        </div>
                                    </div>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        </div>
    }
    componentDidMount(){
        HotCon.getHotList(res=>{
            this.setState({
                playlist:res.data.playlist,
                tracks:res.data.playlist.tracks
            })
        })
        this.$(document).scroll((e)=> {
                // 顶部导航
                var $header = this.$('#hotCom .header');
                var $nav_box = this.$('.nav_box');
                // 歌单列表
                var $ml_box = this.$('#hotCom .music_list_box'); 


                let nav_height = $nav_box.height();
                let s_top = this.$(document).scrollTop();
                let mlb_t = $ml_box.offset().top;
                $ml_box.height(this.$(window).height() - nav_height * 2)
                // 判断是否在顶部
                if (mlb_t - nav_height * 2 <= s_top) {
                    $ml_box.addClass('suckTop');
                    this.$('#hotCom .ml_ul').css('background','rgba(245,245,245,0.5)');
                } else {
                    this.$('#hotCom .ml_ul').css('background','#fff');
                    $ml_box.removeClass('suckTop');
                }
                $header.find('.hd_con').css('opacity', (mlb_t - nav_height - s_top) / (mlb_t - nav_height));
        });
        this.$('#hotCom').addClass('animate__fadeIn');
    }
    componentWillUnmount(){
        this.$(document).unbind();
    }
}

export default Hot;